import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Space, Select, Checkbox } from 'antd';

const onFinish = (values: any) => {
    console.log('Received values of form:', values);

    console.log(JSON.stringify(values))
};
const selectTypeOptions: optionT = [
    { value: "HD", label: '核电站' },
    { value: "HL", label: '火力发电站' },
    { value: "SL", label: '水力发电' },
    { value: "TY", label: '太阳能发电' },
    { value: "FL", label: '风力发电' },
]
type optionT = { value: string, label: string }[]
const App: React.FC = () => {
    const [form] = Form.useForm();
    const [options, setOptions] = useState<optionT>(selectTypeOptions)
    useEffect(() => {
        console.log('form的effect（）')
        // setTimeout(() => {
        //     form.setFieldsValue({ "remember": true, "dirvices": [{ "drivice": "火力发电站", "选择": ["one"] }, { "drivice": "风力发电", "选择": ["three", "two"] }] })
        //     setSelectOptions()
        // }, 2000);
    }, [form])
    const onGenderChange = () => {
        setSelectOptions()
    };
    const setSelectOptions = () => {
        const list = form.getFieldsValue(true).dirvices
        const listSelect: string[] = []
        for (let i = 0; i < list.length; i++) {
            if (list[i]) {
                listSelect.push(list[i].drivice)
            }
        }
        const res: optionT = [] as optionT
        for (let i = 0; i < selectTypeOptions.length; i++) {
            const select = selectTypeOptions[i];
            if (!listSelect.includes(select.label)) {
                res.push({ value: select.value, label: select.label })
            }
        }
        setOptions(res)
    }
    return (

        <Form
            name="dynamic_form_nest_item"
            onFinish={onFinish}
            autoComplete="off"
            form={form}
        >
            <Form.Item name="remember" valuePropName="checked" label={'是否自动打印'}>
                <Checkbox />
            </Form.Item>

            <Form.List name="dirvices">
                {(fields, { add, remove }) => (
                    <>
                        <Form.Item>
                            <Button type="primary" onClick={() => add()} >
                                新增aaa
                            </Button>
                        </Form.Item>
                        {fields.map(({ key, name, ...restField }) => (
                            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                <Form.Item
                                    {...restField}
                                    name={[name, 'drivice']}
                                    label={'设备类型'}
                                    key={key}
                                    rules={[{ required: true, message: '请输入设备类型' }]}
                                >
                                    <Select
                                        placeholder="Select a option and change input text above"
                                        onChange={onGenderChange}
                                        allowClear
                                        key={key}
                                        style={{ width: 200 }}
                                        filterOption={false}
                                    >
                                        {
                                            options.map((v) => (
                                                <Select.Option key={v.value} value={v.label}>{v.label}</Select.Option>
                                            ))
                                        }

                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    {...restField}
                                    name={[name, '选择']}
                                    label={'警告等级'}
                                    rules={[{ required: true, message: '请输入警告等级' }]}
                                >
                                    <Checkbox.Group style={{ width: 300 }}>
                                        <Checkbox value="one">一级</Checkbox>
                                        <Checkbox value="two">二级</Checkbox>
                                        <Checkbox value="three">三级</Checkbox>
                                    </Checkbox.Group>
                                </Form.Item>
                                <Button type="dashed" htmlType="submit" onClick={() => {
                                    remove(name)
                                    setSelectOptions()
                                }}>
                                    删除
                                </Button>
                            </Space>
                        ))}

                    </>
                )}
            </Form.List>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>
        </Form >
    )
};

export default App;